<template>
	<div class="life-area-wrap" >
		<van-nav-bar
		  title="生活专区"
		  left-arrow
		  fixed
		  :border="false"
		  @click-left="onClickLeft"
		/>
		
		<div class="module-ul" >
			<div 
			v-for="(item, index) in list"
			:key="index"
			class="module-li" >
				<div class="module-li-name " >{{ item.name }}</div>
				<div class="module-li-some" >
					<div 
					v-for="(pItem, pIndex) in item.arr"
					:key="pIndex"
					@click="handleToArea"
					class="module-icon" >
						<img class="module-icon-val" :src="pItem.icon" alt="">
						<div class="module-icon-name" >{{ pItem.name }}</div>
					</div>
				</div>
			</div>
			
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '影音娱乐',
						arr: [{
							name: '爱奇艺',
							icon: require('@/images/module/a/module-icon-1-1.png')
						},{
							name: 'QQ音乐',
							icon: require('@/images/module/a/module-icon-1-2.png')
						},{
							name: '优酷会员',
							icon: require('@/images/module/a/module-icon-1-3.png')
						},{
							name: '腾讯会员',
							icon: require('@/images/module/a/module-icon-1-4.png')
						},{
							name: '芒果TV',
							icon: require('@/images/module/a/module-icon-1-5.png')
						},
						{
							name: '喜马拉雅',
							icon: require('@/images/module/a/module-icon-1-6.png')
						},
						{
							name: '腾讯体育',
							icon: require('@/images/module/a/module-icon-1-7.png')
						},
						{
							name: '搜狐视频',
							icon: require('@/images/module/a/module-icon-1-8.png')
						},
						{
							name: '百度网盘',
							icon: require('@/images/module/a/module-icon-1-9.png')
						},
						{
							name: '陌陌',
							icon: require('@/images/module/a/module-icon-1-10.png')
						},
						{
							name: '网易云音乐',
							icon: require('@/images/module/a/module-icon-1-11.png')
						},
						{
							name: '酷我音乐',
							icon: require('@/images/module/a/module-icon-1-12.png')
						},
						{
							name: '迅雷',
							icon: require('@/images/module/a/module-icon-1-13.png')
						},
						{
							name: '酷狗音乐',
							icon: require('@/images/module/a/module-icon-1-14.png')
						},
						{
							name: '新浪微博',
							icon: require('@/images/module/a/module-icon-1-15.png')
						},
						{
							name: '蜻蜓FM',
							icon: require('@/images/module/a/module-icon-1-16.png')
						},
						{
							name: '咪咕视频',
							icon: require('@/images/module/a/module-icon-1-17.png')
						},
						{
							name: '哔哩哔哩',
							icon: require('@/images/module/a/module-icon-1-18.png')
						},
						{
							name: '1905电影',
							icon: require('@/images/module/a/module-icon-1-19.png')
						}]
					},
					{
						name: '美食饮品',
						arr: [{
								name: '必胜客',
								icon: require('@/images/module/b/module-icon-2-1.png')
							},
							{
								name: '星巴克',
								icon: require('@/images/module/b/module-icon-2-2.png')
							},
							{
								name: '百果园',
								icon: require('@/images/module/b/module-icon-2-3.png')
							},
							{
								name: '肯德基',
								icon: require('@/images/module/b/module-icon-2-4.png')
							},
							{
								name: 'DQ冰淇淋',
								icon: require('@/images/module/b/module-icon-2-5.png')
							},
							{
								name: '麦当劳',
								icon: require('@/images/module/b/module-icon-2-6.png')
							},
							{
								name: '幸福西饼',
								icon: require('@/images/module/b/module-icon-2-7.png')
							},
							{
								name: '瑞幸咖啡',
								icon: require('@/images/module/b/module-icon-2-8.png')
							},
							{
								name: '哈根达斯',
								icon: require('@/images/module/b/module-icon-2-9.png')
							},
							{
								name: '奈雪的茶',
								icon: require('@/images/module/b/module-icon-2-10.png')
							},
							{
								name: '喜茶',
								icon: require('@/images/module/b/module-icon-2-11.png')
							},
							{
								name: '美团',
								icon: require('@/images/module/b/module-icon-2-12.png')
							},
							{
								name: '大众点评',
								icon: require('@/images/module/b/module-icon-2-13.png')
							},

						]
					},
					{
						name: '外卖送餐',
						arr: [{
								name: '美团',
								icon: require('@/images/module/c/module-icon-3-1.png')
							},
							{
								name: '饿了么',
								icon: require('@/images/module/c/module-icon-3-2.png')
							}
						]
					},
					{
						name: '商超购物',
						arr: [{
								name: '天猫超市',
								icon: require('@/images/module/d/module-icon-4-1.png')
							},
							{
								name: '盒马鲜生',
								icon: require('@/images/module/d/module-icon-4-2.png')
							},
							{
								name: '京东',
								icon: require('@/images/module/d/module-icon-4-3.png')
							},
							{
								name: '沃尔玛',
								icon: require('@/images/module/d/module-icon-4-4.png')
							},
							{
								name: '世纪联华',
								icon: require('@/images/module/d/module-icon-4-5.png')
							},
							{
								name: '永辉超市',
								icon: require('@/images/module/d/module-icon-4-6.png')
							},
							{
								name: '山姆',
								icon: require('@/images/module/d/module-icon-4-7.png')
							},
							{
								name: '网易考拉',
								icon: require('@/images/module/d/module-icon-4-8.png')
							},
							{
								name: '淘宝',
								icon: require('@/images/module/d/module-icon-4-9.png')
							},
							{
								name: '拼多多',
								icon: require('@/images/module/d/module-icon-4-10.png')
							},
							{
								name: '苏宁易购',
								icon: require('@/images/module/d/module-icon-4-11.png')
							},
							{
								name: '唯品会',
								icon: require('@/images/module/d/module-icon-4-12.png')
							},
						]
					},
					{
						name: '旅游出行',
						arr: [{
								name: '滴滴出行',
								icon: require('@/images/module/e/module-icon-5-1.png')
							},
							{
								name: '哈罗出行',
								icon: require('@/images/module/e/module-icon-5-2.png')
							},
							{
								name: '曹操出行',
								icon: require('@/images/module/e/module-icon-5-3.png')
							},
							{
								name: '青桔单车',
								icon: require('@/images/module/e/module-icon-5-4.png')
							},
							{
								name: '携程',
								icon: require('@/images/module/e/module-icon-5-5.png')
							},
							{
								name: '美团酒店',
								icon: require('@/images/module/e/module-icon-5-6.png')
							},
							{
								name: '高德打车',
								icon: require('@/images/module/e/module-icon-5-7.png')
							},
						]
					},
					{
						name: '生活服务',
						arr: [{
								name: '滴滴出行',
								icon: require('@/images/module/f/module-icon-6-1.png')
							},
							{
								name: '腾讯微云',
								icon: require('@/images/module/f/module-icon-6-2.png')
							},
							{
								name: 'Keep',
								icon: require('@/images/module/f/module-icon-6-3.png')
							},
							{
								name: '话费充值',
								icon: require('@/images/module/f/module-icon-6-4.png')
							},
							{
								name: '每日瑜伽',
								icon: require('@/images/module/f/module-icon-6-5.png')
							},
						]
					},
					{
						name: '电影演出',
						arr: [{
								name: '淘票票',
								icon: require('@/images/module/g/module-icon-7-1.png')
							},
							{
								name: '猫眼电影',
								icon: require('@/images/module/g/module-icon-7-2.png')
							},
							{
								name: '线下影院',
								icon: require('@/images/module/g/module-icon-7-3.png')
							},
						]
					}
				]
			}
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			handleToArea() {
				this.$toast('暂未开放')
			}
		}
		
	}
</script>

<style lang="scss" >
	.life-area-wrap{
		min-height: 100vh;
		padding-top: 46px;
		padding-bottom: 0.6rem;
		background-color: #ffffff;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.module-ul{
			padding: 0 0.32rem;
			.module-li{
				padding-top: 0.32rem;
				.module-li-name{
					position: relative;
					height: 0.44rem;
					margin-bottom: 0.24rem;
					line-height: 0.44rem;
					font-weight: 500;
					font-size: 0.32rem;
					color: #333333;
					&::before{
						position: absolute;
						bottom: 0;
						left: 0;
						content: '';
						width: 1.28rem;
						height: 0.14rem;
						background: linear-gradient( 90deg, #FD1A1A 0%, rgba(231,1,1,0) 100%);
					}
				}
				.module-li-some{
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					.module-icon{
						width: 1.2rem;
						margin-right: 0.2rem;
						margin-bottom: 0.16rem;
						&:nth-child(5n) {
							margin-right: 0;
						}
						.module-icon-val{
							display: block;
							width: 1rem;
							height: 1rem;
							margin: auto;
						}
						.module-icon-name{
							height: 0.34rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>